<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闲时-发布服务</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../css/services/serviceRelease.css" type="text/css">
    <link rel="stylesheet" href="../plugins/Hplus-v.4.1.0/css/plugins/sweetalert/sweetalert.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" type="text/css">

</head>
<body>
<%@ include file="../common/nav.jsp"%>
<span id="userinfoId" style="display: none">${sessionScope.userinfoId}</span>
<div class="xs-rel-ser">
    <div class="xs-rel-ser-clearfix">
        <div class="rel-content-l">
            <!-- 选择发布需求的分类 - begin -->
            <div class="content-one">
                <h4>
                    1、请选择需求分类
                </h4>
                <div class="category">
                    <select class="" id="category" style="float: left" onchange="category()">
                        <option value="-1">请选择需求类别</option>
                        <c:forEach items="${requestScope.categoryList}" var="t">
                            <c:if test="${t.status == 0}">
                                <option value="${t.id}">${t.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                    <select class="" id="categoryDetail" style="float: left">
                        <option value="-1">请选择具体需求类别</option>

                    </select>
                </div>
            </div>
            <!-- 选择发布服务的分类 - end -->
            <!-- 填写服务标题和联系方式 - begin -->
            <div class="content-two">
                <h4>2、填写需求标题和联系方式</h4>
                <div class="content-two-clearfix">
                    <!-- 上传封面 - begin -->
                    <div class="content-two-l">
                        <label>
                            <%--<div style="text-align: center">--%>
                                <%--<input class="upload-cover" id="path" type="file" height="160px"  width="160px" name="file"--%>
                                       <%--multiple="multiple" accept="image/jpg,image/jpeg,image/png">--%>
                                <%--<span class="upload-tips plus-sign">+</span><br>--%>
                                <%--<span class="upload-tips">需求封面<br>（建议400*400像素）</span>--%>
                            <%--</div>--%>
                            <div id="unpicture" style="text-align: center; " >
                                <from method="post" enctype="multipart/form-data" id="path">
                                    <input class="upload-cover" id="myfile" type="file" height="160px"  width="160px" name="myfile"
                                           multiple="multiple" accept="image/jpg,image/jpeg,image/png">
                                    <span class="upload-tips plus-sign">+</span><br>
                                    <span class="upload-tips">服务封面<br>（建议400*400像素）</span>
                                </from>
                            </div>
                            <div id="preview" >

                            </div>
                        </label>
                    </div>
                    <!-- 上传封面 - end -->
                    <!-- 说明 - 地点 - 联系方式 - begin -->
                    <div class="content-two-r">
                        <div class="content-two-list">
                            <span class="font14"><i>*</i>来个醒目的标题吸引服务者</span>
                            <div class="ser-title">
                                    <input type="text" id="title" style=" border-radius: 5px;height: 35px;padding-left: 5px;" id="serTitle" name="serTitle"
                                           placeholder="请简单说明您的服务内容" onfocus="this.placeholder=''"
                                           onblur="this.placeholder='最多输入30个字符'" onkeydown="content1();">
                            </div>
                        </div>
                        <div class="content-two-list">
                            <span class="font14"><i>*</i>我的地点</span>
                            <div>
                                <form class="form-inline">
                                    <div data-toggle="distpicker" id="distpicker">
                                        <div class="form-group">
                                            <label class="sr-only" for="province1">Province</label>
                                            <select class="form-control" id="province1"></select>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="city1">City</label>
                                            <select class="form-control" id="city1"></select>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="district1">District</label>
                                            <select class="form-control" id="district1"></select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="content-two-list">
                            <span class="font14">手机号码</span>
                            <div>
                                <input type="tel" style="height: 35px" id="cellPhone" name="cellPhone" value="">
                            </div>
                        </div>
                        <%--<div class="content-two-list">--%>
                        <%--<span class="font14">QQ号码</span>--%>
                        <%--<div>--%>
                        <%--<input type="text" style="height: 35px" id="qqCode" name="qqCode" value="">--%>
                        <%--</div>--%>
                        <%--</div>--%>
                    </div>
                    <!-- 说明 - 地点 - 联系方式 - end -->
                </div>
            </div>
            <!-- 填写服务标题和联系方式 - end -->

            <!-- 设置收费模式和价格 - begin -->
            <div class="content-four">
                <h4>3、设置收费模式和价格</h4>
                <div class="content-four-box">
                    <div class="charge-type">
                        <span>按时间收费</span>
                    </div>
                    <div>
                        <p class="charge-tip">按照工作时间收费，可以设置可被预约的具体时间，预约开始时间前不接单，订单自动关闭</p>
                    </div>
                    <div class="bgc-f5">
                        <div class="ser-cost-box">
                            <span class="ser-cost">服务费用：</span>
                            <input type="number" class="price" id="price" placeholder="请输入金额" onfocus="this.placeholder=''"
                                   onblur="this.placeholder='最多999999元'"onkeydown="content2();">
                            <span class="price-unit">元</span>
                            <select class="ser-cost-type" id="hdm" onchange="change()">
                                <option value="1" id="hour">/小时</option>
                                <option value="2" id="day">/天</option>
                                <option value="3" id="month">月</option>
                            </select>
                        </div>
                        <div>
                            <span class="time-of-appointment">可约时间：</span>
                            <div class="time-area">
                                <input type="text" class="layui-input" id="test8" placeholder="请选择月份范围" onfocus="this.placeholder=''" onblur="this.placeholder='请选择月份范围'" style="display: none" onkeydown="content3();">
                                <input type="text" class="layui-input" id="test6" placeholder="请选择天数范围" onfocus="this.placeholder=''" onblur="this.placeholder='请选择天数范围'" style="display: none" onkeydown="content4();">
                                <input type="text" class="layui-input" id="test10" placeholder="请选择小时范围" onfocus="this.placeholder=''" onblur="this.placeholder='请选择小时范围'" style="display: block" onkeydown="content5();">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 设置收费模式和价格 - end -->

            <%--<div class="content-three">--%>
                <%--<h4>4、增值服务</h4>--%>
                <%--<div class="l-common-box">--%>
                    <%--<div class="ser-introduce" id="push">--%>
                        <%--<label class="checkbox" for="closeButton">--%>
                            <%--<input id="closeButton" type="checkbox" value="checked" class="input-mini"--%>
                                   <%--checked="">向更多的人推荐您的需求--%>
                        <%--</label>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>

        </div>
        <div class="rel-ser-r">
            <div class="ser-note">
                <h4>服务注意事项:</h4>
                <ul>
                    <li>1、根据国家广告法新规，标题请不要使用不实虚假夸大的描述，如：国家级、最好、全网最低、第一、独家等限制级词语。</li>
                    <li>2、服务的封面图片和详情中请不要使用存在侵权的字体和图片，如有侵权行为，平台将下架该服务。</li>
                    <li>3、双方达成协议后，服务商在完成时间后7天内不提交验收，默认放弃服务，托管金额将全额返还给需求者。</li>
                    <li>4、交易全程零佣金，但依法纳税是每个公民的义务，平台将从每笔订单收入中扣除相应的综合服务税费，以帮个体开票给到需求方。</li>
                </ul>
                <!-- 客服 - begin -->
                <div class="division">
                    <span class="customer-ser">发布有疑问？客服来帮忙！</span>
                </div>
                <a href="#" class="qq-a">QQ在线联系</a>
                <span class="ser-timearea">周一至周五9:00~18:00</span>
                <span class="customer-ser-tel">400-180-8321</span>
                <span class="ser-timearea">周一至周日9:00~21:00</span>
                <!-- 客服 - end -->
            </div>

            <!-- 发布 - begin -->
            <div class="release">
                <h4 style="padding-bottom: 25px;">发布</h4>
                <a href="javascript:void(0)" class="ser-btn">
                    <button type="button" class="btn-save save" id="save">保存草稿</button>
                </a>
                <a href="javascript:void(0)" class="ser-btn">
                    <button type="submit" class="btn-release commit" id="commit">确认发布</button>
                </a>
            </div>
            <!-- 发布 - end -->
        </div>
    </div>
</div>
<%@ include file="../common/footer.jsp"%>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
<script src="../plugins/layui/layui.all.js"></script>
<script src="../js/demand/demandRelease.js"></script>
<script src="../plugins/Hplus-v.4.1.0/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript" src="/js/services/ajaxfileupload.js"></script>
<script src="../plugins/bootstrap-date/js/distpicker.data.js"></script>
<script src="../plugins/bootstrap-date/js/distpicker.js"></script>
<script src="../plugins/bootstrap-date/js/main.js"></script>



</body>

</html>